<template>
  <!-- <el-button text @click="Dialog = true">
    Click to open the Dialog
  </el-button> -->

  <el-dialog v-model="Dialog" title="新增群组" width="30%" center>
    <div style="margin: 20px" />
  <el-form
    :label-position="right"
    label-width="100px"
    :model="fromObj"
    style="max-width: 460px"
  >
    <el-form-item label="设备群组">
      <el-input v-model="fromObj.groupName" />
    </el-form-item>
  </el-form>
     <div class="flex jc-c">
         <el-form-item >
        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
        <el-button @click="Dialog = false">取消</el-button>
        </el-form-item>
     </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import * as api from '../../../api/index'
import { ElMessage ,ElMessageBox } from 'element-plus'

const Dialog = ref(false)

//从父组件接收
const props = defineProps({
    fromObj:Object,
    editing:Boolean,
    fromObjs:String
})
//暴露给父组件访问
defineExpose({
    Dialog
})
//确定
const submitForm = ()=>{
    let data = {
            groupName: props.fromObj.groupName,
            id: props.fromObjs,
            nodeNums: props.fromObj.nodeNums,
            onlineNums: props.fromObj.onlineNums
        }
        console.log(`output-data.id`,data.id)
        console.log(`output-fromObj.id`,props.fromObj.id)
   if(!data.groupName){
        ElMessage({
        message: '值不能为空',
        type: 'warning',
    })
    console.log(`output-data.id`,data.id)
   }else{
        if(props.editing){
        console.log(`output-data`,data)
        api.$groupEdit(data).then(res=>{
         Dialog.value = false
         emit('submit',res.data)  
         ElMessage({
        message: '修改成功',
        type: 'success',
         }); 
        })
    }else{
    api.$groupAdd(data).then(res=>{
        Dialog.value = false
        emit('submit',res.data)
        ElMessage({
        message: '添加成功',
        type: 'success',
         });
    })
    }
   }
    
}
//表单的值和事件名传给父组件
const emit = defineEmits(['submit'])
</script>